<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import microApp from '@micro-zoe/micro-app'
import loginApi from '@/api/login.js'

const router = useRouter()
const globalData = microApp.getGlobalData()
const { proxy: instance } = getCurrentInstance()

const activeIndex = ref()

const handleSelect = (e) => {
  switch (e) {
    case 'home':
      router.push({name: 'childHome'})
      break;
    case 'job':
      router.push({name: 'childJob'})
      break;
    case 'enterprise':
      router.push({name: 'childEnterprise'})
      break;
    case 'about':
      router.push({name: 'childAbout'})
      break;
    default:
      break;
  }
}

const toLogin = () => {
  router.push({
    name: 'login'
  })
}

const logout = async () => {
  const res = await loginApi.logout()
  const { code, msg } = res
  if (code === 0) {
    instance.$message.success('退出成功')
    router.go(0)
  } else {
    instance.$message.error(msg)
  }
}

</script>

<template>
  <div class="common-header">
    <el-menu
      :default-active="activeIndex"
      background-color="#202329"
      text-color="#fff"
      active-text-color="#ffd04b"
      mode="horizontal"
      @select="handleSelect"
    >
      <span class="logo">BISS</span>
      <el-menu-item index="home">首页</el-menu-item>
      <el-menu-item index="job">找工作</el-menu-item>
      <el-menu-item index="enterprise">找企业</el-menu-item>
      <el-menu-item index="about">关于</el-menu-item>
      <el-button v-if="globalData && globalData.token" round plain size="small" class="login-btn" @click="logout">登出</el-button>
      <el-button v-else round plain size="small" class="login-btn" @click="toLogin">登录</el-button>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
.common-header {
  background-color: #202329;
  .el-menu {
    display: flex;
    margin: 0 auto;
    width: 1200px;
    border: none;
    padding-left: 200px;
    .el-menu-item {
      height: 46px;
    }
    .login-btn {
      position: absolute;
      right: 15px;
      top: 12px;
      width: 80px;
    }
    .logo {
      color: #ffd04b;
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      line-height: 24px;
      left: 15px;
      top: 10px;
      cursor: pointer;
    }
  }
}
</style>